<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="sliderBase" src="../sliderBase.xml"/>

		<d:element name="slider" extends="b:sliderBase">
			
			<d:resource type="text/css"><![CDATA[/* SLIDER */
.btl-slider {
	font-size: smaller;
	position: relative;
}

.btl-slider-horizontal {
	width: 150px;
	padding-top: 1.6em;
}

.btl-slider-vertical {
	height: 150px;
}

/* THE COLOR FILL AREA */
.btl-slider-fillArea {
	position: absolute;
	overflow: hidden;
	background-color: highlight;
}

.btl-slider-horizontal .btl-slider-fillArea {
	top: 7px;
	height: 6px;
}

.btl-slider-vertical .btl-slider-fillArea {
	left: 7px;
	width: 6px;
}

/* THE LABELS */
.btl-slider-current {
	position: absolute;
	z-index: 9997; /* value two lower than b:toolTip */
	text-align: center;
	padding: 0 3px;
	background-color: InfoBackground;
	border: 1px solid ThreeDShadow;
	white-space: nowrap;
}

/* rules for the active label element */
.btl-slider-activeCurrent {
	z-index: 9998; /* value one lower than b:toolTip */
}

.btl-slider-horizontal .btl-slider-current {
	top: -1.7em;
}

.btl-slider-horizontal .btl-slider-min {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.btl-slider-horizontal .btl-slider-max {
	position: absolute;
	bottom: 0;
	right: 0;
}

.btl-slider-vertical .btl-slider-min {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.btl-slider-vertical .btl-slider-max {
	position: absolute;
	top: 0;
	left: 0;
}

.btl-slider-vertical .btl-slider-value-label-container {
	position: absolute;
	left: 22px;
	height: 150px;
}

.btl-slider-vertical .btl-slider-current {
	left: 25px;
}

/* THE GRIPPY CONTAINER */
.btl-slider-container {
	position: relative;
	overflow: visible;
	z-index: 2;
}

.btl-slider-focus-indicator {
	border-width: 0;
	border-style: none;
	padding: 1px;
}

.btl-slider-focus .btl-slider-focus-indicator {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	padding: 0;
}

.btl-slider-horizontal .btl-slider-container {
	height: 20px;
}

.btl-slider-vertical .btl-slider-container {
	width: 20px;
	height: 100%;
}

.btl-slider-horizontal .btl-slider-focus-indicator {
	height: 22px;
}

.btl-slider-vertical .btl-slider-focus-indicator {
	width: 22px;
	height: 100%;
}

/* THE GRIPPY */
.btl-slider-grippy {
	position: absolute;
	border-width: 1px;
	border-style: solid;
	border-color: ThreeDLightShadow ThreeDShadow ThreeDShadow ThreeDLightShadow;
	background-color: ThreeDFace;
	z-index: 10;
}

/* rules for the active grippy */
.btl-slider-activeGrippy {
	z-index: 11; /* one level higher than simple grippy */
}

.btl-slider-grippy-inner {
	border-width: 1px;
	border-style: solid;
	border-color: ThreeDHighLight ThreeDFace ThreeDFace ThreeDHighLight;
	overflow: hidden;
}

/* active grippy while it is dragged */
.btl-slider-active .btl-slider-activeGrippy {
	border-color: ThreeDShadow ThreeDLightShadow ThreeDLightShadow ThreeDShadow;
}

.btl-slider-active .btl-slider-activeGrippy .btl-slider-grippy-inner {
	border-color: ThreeDFace ThreeDHighLight ThreeDHighLight ThreeDFace;
}

.btl-slider-horizontal .btl-slider-grippy {
	width: 8px;
	height: 20px;
}

.btl-slider-horizontal .btl-slider-grippy-inner {
	width: 6px;
	height: 18px;
}

.btl-slider-vertical .btl-slider-grippy {
	width: 20px;
	height: 8px;
}

.btl-slider-vertical .btl-slider-grippy-inner {
	width: 18px;
	height: 6px;
}

/* Cursors for the grippy and label */
.btl-slider-horizontal .btl-slider-grippy,
.btl-slider-horizontal .btl-slider-current {
	cursor: col-resize;
	cursor: e-resize;
}

.btl-slider-vertical .btl-slider-grippy,
.btl-slider-vertical .btl-slider-current {
	cursor: row-resize;
	cursor: s-resize;
}

/* THE SLIDER LINES */

.btl-slider-horizontal .btl-slider-line-highlight,
.btl-slider-horizontal .btl-slider-line-shadow {
	position: absolute;
	left: 0;
	height: 1px;
	width: 100%;
	overflow: hidden;
}

.btl-slider-horizontal .btl-slider-line-highlight {
	top: 9px;
	background-color: ThreeDLightShadow;
}

.btl-slider-horizontal .btl-slider-line-shadow {
	bottom: 9px;
	background-color: ThreeDShadow;
}

.btl-slider-vertical .btl-slider-line-highlight,
.btl-slider-vertical .btl-slider-line-shadow {
	position: absolute;
	top: 0;
	height: 100%;
	width: 1px;
	overflow: hidden;
}

.btl-slider-vertical .btl-slider-line-highlight {
	left: 9px;
	background-color: ThreeDLightShadow;
}

.btl-slider-vertical .btl-slider-line-shadow {
	right: 9px;
	background-color: ThreeDShadow;
}

/* SHOWING OR HIDING LABELS */
.btl-slider-no-labels {
}
.btl-slider-vertical-labels {
	padding-top: 1.2em;
	padding-bottom: 1.2em;
}
.btl-slider-horizontal-labels {
	padding-bottom: 1.2em;
}

.btl-slider-drag-tooltip .btl-slider-current,
.btl-slider-no-tooltip .btl-slider-current,
.btl-slider-no-labels .btl-slider-min,
.btl-slider-no-labels .btl-slider-max {
	display: none;
}

.btl-slider-drag-tooltip .btl-slider-active .btl-slider-current {
	display: block;
}

.btl-disabled .btl-slider-current,
.btl-disabled .btl-slider-min,
.btl-disabled .btl-slider-max {
	color: GrayText;
}

/* FIXES */
.btl-slider,
.btl-slider * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
]]></d:resource>

			<!--  the styling (top+left values of -10px) are set to the btl-invisibleFocusInput element to avoid the panelSet from moving around when the slider is focused -->
			<d:template type="application/xhtml+xml">
				<div class="btl-slider">
					<input type="text" class="btl-invisibleFocusInput" style="position:absolute;top:-10px;left:-10px;" readonly="readonly"/>
					<span class="btl-slider-max"/>
					<div class="btl-slider-focus-indicator">
						<div class="btl-slider-container" onmousedown="return false" onselectstart="return false">
							<div class="btl-slider-line-highlight"/>
							<div class="btl-slider-line-shadow"/>
							<div class="btl-slider-fillArea"/>
							<d:content/>
						</div>
					</div>
					<span class="btl-slider-min"/>
				</div>
			</d:template>

			<d:attribute name="name" onmap="this.getProperty('focusElement').name = value"/>

			<d:attribute name="min">
				<d:mapper type="text/javascript"><![CDATA[
					// FIXME: such kind of implementation is ugly I've spent too much
					// time to understand that this code puts its text to my element
					var oMinValue = this.viewNode.getElementsByTagName('span');
					oMinValue = oMinValue[oMinValue.length - 1];
					var aOptions = this.getProperty('options');
					if(aOptions.length)
						value = aOptions[0].getProperty('text') || aOptions[0].getProperty('value');
					oMinValue.innerHTML = value;
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="max">
				<d:mapper type="text/javascript"><![CDATA[
					var oMaxValue = this.viewNode.getElementsByTagName('span')[0];
					var aOptions = this.getProperty('options');
					if(aOptions.length)
						value = aOptions[aOptions.length-1].getProperty('text') || aOptions[aOptions.length-1].getProperty('value');
					oMaxValue.innerHTML = value;
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="showLabels">
				<d:mapper type="text/javascript"><![CDATA[
					bb.html.removeClass(this.viewNode, ['btl-slider-no-labels', 'btl-slider-horizontal-labels', 'btl-slider-vertical-labels']);
					if (value == 'false')
						bb.html.addClass(this.viewNode, 'btl-slider-no-labels');
					else
						bb.html.addClass(this.viewNode, this.getAttribute('orientation') == 'horizontal'? 'btl-slider-horizontal-labels' : 'btl-slider-vertical-labels');
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="showToolTip">
				<d:mapper type="text/javascript"><![CDATA[
					if (value == 'false' || value == 'never')
						bb.html.addClass(this.viewNode, 'btl-slider-no-tooltip');
					else if (value == 'drag')
						bb.html.addClass(this.viewNode, 'btl-slider-drag-tooltip');
					else
						bb.html.removeClass(this.viewNode, ['btl-slider-no-tooltip', 'btl-slider-drag-tooltip']);
				]]></d:mapper>
			</d:attribute>

			<d:method name="getScaleElement">
				<d:body type="text/javascript"><![CDATA[
					var oEl = null;
					if (!this.__sliderScale) {
						oEl = bb.html.getLastByNodeType(this.viewNode, 1);
						oEl = bb.html.getPreviousByNodeType(oEl, 1);
						this.__sliderScale = bb.html.getFirstByNodeType(oEl, 1);
					}
					return this.__sliderScale;
				]]></d:body>
			</d:method>

			<d:handler event="blur" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-slider-focus');
			]]></d:handler>

			<d:handler event="focus" type="text/javascript"><![CDATA[
				bb.html.addClass(this.viewNode, 'btl-slider-focus');
			]]></d:handler>
		</d:element>

		<d:element name="sliderGrippy" extends="b:sliderGrippyBase">
			

			<d:resource type="application/xhtml+xml" name="tooltip"><![CDATA[
				]]><span class="btl-slider-current"><span/></span><![CDATA[
			]]></d:resource>

			<d:template type="application/xhtml+xml">
				<div class="btl-slider-grippy" onbeforeactivate="return false;">
					<div class="btl-slider-grippy-inner"/>
				</div>
			</d:template>

			<d:method name="getLabelElement">
				<d:body type="text/javascript"><![CDATA[
					if (!this.__label) {
						this.__label = bb.html.getFirstByNodeType(this.getToolTipElement(), 1);
					}
					return this.__label;
				]]></d:body>
			</d:method>
		</d:element>
	</d:namespace>
</d:tdl>